<template>
    <div class="box1">
        <div class="title">
            <p>消费比例</p>
            <img src="../../images/dataScreen-title.png" alt="" />
        </div>
        <div class="sex">
            <div class="man">
                <img src="../../images/man.png" alt="" />
            </div>
            <div class="women">
                <img src="../../images/woman.png" alt="" />
            </div>
        </div>
        <div class="rate">
            <p>男士58%</p>
            <p>女士42%</p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {

        }
    },
    mounted() {
        //初始化echarts实例
        let mycharts = echarts.init(this.$refs.charts)
        //设置配置项
        mycharts.setOption({
            //组件标题
            title: {
                //   text: '男女比例', //主标题
                textStyle: {
                    //主标题颜色
                    color: 'skyblue',
                },
                left: '40%',
            },
            //x|y
            xAxis: {
                show: false,
                min: 0,
                max: 100,
            },
            yAxis: {
                show: false,
                type: 'category',
            },
            series: [
                // 这里有俩个柱状图，下面的覆盖上面的
                {
                    type: 'bar',
                    data: [58],
                    barWidth: 20,
                    // 柱状图的层级
                    z: 100,
                    // 柱状图样式
                    itemStyle: {
                        color: 'skyblue',
                        borderRadius: 20,
                    },
                },
                {
                    type: 'bar',
                    data: [100],
                    //柱状图宽度
                    barWidth: 20,
                    //调整女士柱条位置
                    barGap: '-100%',
                    itemStyle: {
                        color: 'pink',
                        borderRadius: 20,
                    },
                },
            ],
            grid: {
                left: 60,
                top: -20,
                right: 60,
                bottom: 0,
            },
        })
    },
}

</script>

<style scoped lang="scss">
.box1 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;
    margin: 20px 0px;
    position: relative;

    .title {
        position: absolute;
        top: 0px;
        left: 15px;
        margin-left: 10px;

        p {
            color: white;
            font-size: 20px;
        }
    }

    .sex {
        display: flex;
        justify-content: center;

        .man {
            margin: 20px;
            width: 111px;
            height: 115px;
            background: url(../../images/man-bg.png) no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .women {
            margin: 20px;
            width: 111px;
            height: 115px;
            background: url(../../images/woman-bg.png) no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .rate {
        display: flex;
        justify-content: center;
        color: white;

        p {
            margin: 0 40px;
            margin-top: 10px;
            margin-bottom: -10px;
        }
    }

    .charts {
        height: 100px;
    }
}
</style>